﻿<div class="ui-widget-content">
    <h3>Draggable - Encaixe</h3>
    <div id="draggables_snap">
        <p>
            <span>No slide anterior,</span>
            <span>ficou muito confuso</span>
            <span>ver os draggables</span>
            <span>se amontoando.</span>
            <span>Não seria legal</span>
            <span>se ao invés disso</span>
            <span>eles se encaixassem</span>
            <span>uns nos outros?</span>
        </p>
    </div>
    <div>
        <p>Para fazer isso, usamos:</p>
        <p class="codigo">$(".meus_draggables").draggable({snap: true});</p>
    </div>
    <div>
        <p>Os draggables com snap, por padrão se encaixam em quaisquer outros elementos. É  também:</p>
        <p class="codigo">$(".meus_draggables").draggable({snap: true});</p>
    </div>
    <script type="text/javascript">
        inicializador.draggableSnap = function() {
            $("#draggables_snap p span").draggable({containment: "#draggables_snap", snap: true, snapTolerance: 5});
        };
    </script>
</div>